<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font: 14px SimSun,\5B8B\4F53,serif;
            width: 100%;
            height: 100%;
        }
        body{
            line-height: 24px;
            height: 100%;
            background-color: #F8F1F1;
            width: 100%;
        }
        a{
            text-decoration: none;
        }
        img{
            border: none;
            width: 100%;
        }
        li{
            list-style: none;
        }
        .wrapper{
            max-width: 768px;
            width: 23rem;
            height: 32.21rem;
            margin: 1.5rem auto;
            display: block;
            vertical-align: middle;
        }
        .wrapper-content{
            width: 100%;
            height: 100%;
            background: #FFFFFF url("/static/valentine/img/index_bg.png") no-repeat;
            background-size: cover;
        }
        .content{
            width: 21.14rem;
            height: 30.21rem;
            margin: 1rem 0.93rem;
            float: left;
            display: block;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            border: 0.32rem solid #F1C9CB;
            background: #FFFFFF;
            position: relative;
        }
        .form{
            width: 15.86rem;
            display: block;
            margin: 0 auto;
            /*font-family: serif;*/
        }
        .form-group{
            width: 100%;
        }
        .form-label{
            font-size: 1.43rem;
            color: #372a2a;
            width: 100%;
            height: 1.2rem;
            background-size: auto 100%;
            background-repeat: no-repeat;
            text-indent: -999999px;
        }
        .form-group input {
            border-radius: 0.71rem;
            width: 12.86rem;
            height: 3.57rem;
            display: block;
            font-size: 1.21rem;
            margin-top: 1.5rem;
            background-color: #ffffff;
            outline: none;
            color: #ff8890;
            border: 0.07rem solid #ebebeb;
            box-shadow: none;
            -webkit-appearance: none;
            padding: 0 1.5rem;
            overflow: hidden;
        }
        ::-moz-placeholder{
            color: #d5d5d5;
            font-family: serif;
        }
        ::-webkit-input-placeholder{
            color: #d5d5d5;
            font-family: serif;
        }
        :-ms-input-placeholder{
            color: #d5d5d5;
            font-family: serif;
        }
        .select_sign{
            color: #fe8c93;
            border-width: 0;
            border-radius: 0.71rem;
            text-align: center;
            width: 15.86rem;
            height: 3.57rem;
            line-height: 3.57rem;
            display: block;
            font-size: 1.21rem;
            margin-top: 1.5rem;
            background-color: #FCEEEF;
            outline: none;
        }
        .add_button{
            position: relative;
            width: 13.21rem;
            height: 3.21rem;
            margin: 0 auto;
            display: block;
            background: url("/static/valentine/img/add_button.png") no-repeat;
            background-size: cover;
            text-indent: -9999999px;
            border: none;
            bottom: -5.6rem;
            outline: none;
        }
        .label-name1{
            margin-top: 3.79rem;
            background-image: url('/static/valentine/img/your_name_3x.png');
        }
        .label-name2{
            margin-top: 2.14rem;
            background-image: url('/static/valentine/img/her_name_3x.png');
        }
        .label-sign{
            margin-top: 2.14rem;
            background-image: url('/static/valentine/img/her_constellation_3x.png');
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: 0.7;
            filter:alpha(opacity=70);
            z-index: 1;
            display: none;
        }
        #model{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: none;
        }
        .signs{
            width: 100%;
            height: 37.86rem;
            background: #FFFFFF url("/static/valentine/img/select_sign_bg.png") no-repeat;
            background-position: center 0.92rem;
            background-size: 20.79rem auto;
            overflow: hidden;
        }
        .signs-content{
            width: 20.79rem;
            height: 26rem;
            border:0.32rem solid #F1C9CB;
            margin: 6.1rem auto 0;
            border-collapse:collapse;
        }
        tr,td{
            border-color: #f3f2f1;
            text-align: center;
            font-size: 1.07rem;
            color: #77726f;
        }
        td.active{
            background: #fff7f7;
            color: #ff8890;
        }
        .buttons{
            width: 20.79rem;
            margin: 0 auto 0;
        }
        .buttons a{
            width: 50%;
            float: left;
            text-align: center;
            font-size: 1.21rem;
            padding: 2.14rem 0;
        }
        .buttons .cancel{
            color: #77726f;
        }
        .buttons .ok{
            color: #ff8890;
        }
        #loading{
            width: 13.21rem;
            height: 15.21rem;
            position: absolute;
            top: 10rem;
            left: 6.79rem;
            z-index: 3;
            background: #DEE1E2;
            border-radius: 0.71rem;
            overflow: hidden;
            display: none;
        }
        #loading .loading-text{
            text-align: center;
            color: #2d2c2b;
            font-weight: bold;
            font-size: 0.86rem;
        }

        @media only screen and (width: 320px) and (height: 504px){
            html{
                font-size: 12px;
            }
        }
        /*iphone 7Plus*/
        @media only screen and (width: 414px) and (height: 672px){
            html{
                font-size: 16px;
            }
            .wrapper{
                margin: 2.35rem auto;
            }
        }
        /*iphone x*/
        @media only screen and (width: 375px) and (height: 724px){
            html {
                font-size: 14px;
            }
            .wrapper{
                /*margin: 7.35rem auto;*/
                height: 40rem;
            }
            .content{
                height:37.96rem;
            }
            .index_img{
                margin-top: 6rem;
            }
            .button{
                margin-top: 2rem;
                position: relative;
                top: 2rem;
            }
        }
    </style>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?11869969a3b6834ebb1d5b9f3d9c7a5f";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="wrapper">
    <div id="tab-2" class="wrapper-content">
        <div class="content">
            <form action="/activity/valentine" class="form" method="post" id="form">
                <div class="form-group">
                    <div class="form-label label-name1">
                        <b>Your</b> name
                    </div>
                    <div class="form-content">
                        <input type="text" name="name1" placeholder="阁下姓名" onkeyup="inputName(this)">
                    </div>
                </div>
                <div class="form-group" style="">
                    <div class="form-label label-name2">
                        <b>His</b>/her name
                    </div>
                    <div class="form-content">
                        <input type="text" name="name2" placeholder="他/她的姓名" onkeyup="inputName(this)">
                    </div>
                </div>
                <div class="form-group" style="">
                    <div class="form-label label-sign">
                        <b>His</b>/her constellation
                    </div>
                    <div class="form-content">
                        <input type="hidden" id="input-sign" name="sign" placeholder="选择他/她的星座">
                        <div class="select_sign" id="select-sign" onclick="selectSign()">选择他/她的星座</div>
                    </div>
                </div>
                <div class="form-group">
                    <a name="submit" value="true" class="add_button" onclick="document.getElementById('shadow').style.display = 'block';document.getElementById('loading').style.display = 'block';setTimeout(checkForm,2000);">
                        生成小纸条
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="shadow" class="shadow"></div>
<div id="model">
    <div class="wrapper">
        <div class="signs">
            <table class="signs-content" border="1px">
                <tr>
                    <td sign="1" onclick="checkSign(this)">白羊座</td>
                    <td sign="2" onclick="checkSign(this)">金牛座</td>
                </tr>
                <tr>
                    <td sign="3" onclick="checkSign(this)">双子座</td>
                    <td sign="4" onclick="checkSign(this)">巨蟹座</td>
                </tr>
                <tr>
                    <td sign="5" onclick="checkSign(this)">狮子座</td>
                    <td sign="6" onclick="checkSign(this)">处女座</td>
                </tr>
                <tr>
                    <td sign="7" onclick="checkSign(this)">天秤座</td>
                    <td sign="8" onclick="checkSign(this)">天蝎座</td>
                </tr>
                <tr>
                    <td sign="9" onclick="checkSign(this)">射手座</td>
                    <td sign="10" onclick="checkSign(this)">摩羯座</td>
                </tr>
                <tr>
                    <td sign="11" onclick="checkSign(this)">水瓶座</td>
                    <td sign="12" onclick="checkSign(this)">双鱼座</td>
                </tr>
            </table>
            <div class="buttons">
                <a href="javascript:;" class="cancel" onclick="checkOver(0)">取消</a>
                <a href="javascript:;" class="ok" onclick="checkOver(1)">确定</a>
            </div>
        </div>
    </div>
</div>
<div id="loading">
    <img src="/static/valentine/img/loading.gif" alt="">
    <p class="loading-text">小纸条生成中...</p>
</div>

<script>

    document.setTitle = function(t) {
        document.title = t;
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = function() {
            setTimeout(function(){
                i.remove();
            }, 0)
        };
        document.body.appendChild(i);
    };

    function checkForm()
    {
        document.getElementById('shadow').style.display = 'none';
        document.getElementById('loading').style.display = 'none';

        var form = document.getElementById('form');
        var name1 = form.name1.value;
        var name2 = form.name2.value;
        var sign = form.sign.value;

        if(!name1.trim())
        {
            alert("请填写您的名字");
            return false;
        }
        if(!name2.trim())
        {
            alert("请填写ta的姓名");
            return false;
        }
        if(!sign.trim())
        {
            alert("请选择ta的星座");
            return false;
        }

        form.submit();
    }

    function inputName(obj)
    {
        if(obj.value.trim() != '')
        {
            console.log(obj.value.trim());
            obj.style.borderColor = '#f8d5d7';
        }
        else{
            console.log(obj.value.trim());
            obj.style.borderColor = '#ebebeb';
        }
    }

    /**
     * 选择星座 设置选中样式
     * @param obj
     */
    function checkSign(obj)
    {
        var td_list = document.getElementsByTagName('td');
        for(var i=0;i<td_list.length;i++)
        {
            if(td_list[i] == obj)
            {
                obj.className = 'active';
            }else{
                td_list[i].className = '';
            }
        }
    }

    /**
     * 去选择星座 -- 显示12星座
     * @returns {boolean}
     */
    function selectSign()
    {
        console.log(document.getElementById('shadow').style.display)
        document.getElementById('shadow').style.display = 'block';
        document.getElementById('model').style.display = 'block';
    }

    function checkOver(status)
    {
        // 点击确认按钮
        if(status)
        {
            var checked = document.getElementsByClassName('active');
            // 未选择
            if(checked.length == 0)
            {
                console.log(checked);
                alert("请选择星座")
            }
            else
            {
                document.getElementById('input-sign').value = checked[0].getAttribute('sign');
                document.getElementById('select-sign').innerHTML = checked[0].innerHTML;
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('model').style.display = 'none';
            }
        }
        // 点击取消按钮
        else
        {
            document.getElementById('shadow').style.display = 'none';
            document.getElementById('model').style.display = 'none';
            // 重置选中状态
            var td_list = document.getElementsByTagName('td');
            for(var i=0;i<td_list.length;i++)
            {
                td_list[i].className = '';
            }
        }
    }
    wx.config({
        debug: false,
        appId: '{$signPackage.appId}',
        timestamp: {$signPackage.timestamp},
        nonceStr: '{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '{$share_title}',
            desc: '{$share_introduction}',
            link: '{$signPackage.url}',
            imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show',
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: '{$share_title}',
            link: '{$signPackage.url}',
            imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show',
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
